<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
	<script th:src="@{/layui/layui.js}"></script>
</head>
<style>
	::-webkit-scrollbar {display:none}/*隐藏横向滚动条但可以滚动*/
</style>
<body>
<form class="layui-form" action="">
	<div class="layui-form-item" style="margin-top: 20px">
		<label class="layui-form-label">员工姓名</label>
		<div class="layui-input-inline">
			<input  name="emp_name" required lay-verify="required" placeholder="员工姓名" autocomplete="off" class="layui-input">
		</div>

		<label class="layui-form-label">籍贯</label>
		<div class="layui-input-inline">
			<input  name="nation" required lay-verify="required" placeholder="籍贯" class="layui-input">
		</div>

		<label class="layui-form-label">
			<i class="layui-icon">&#xe662;</i>
			<i class="layui-icon">&#xe661;</i>性别</label>
		<div class="layui-input-inline" style="padding-left: 20px">
			<input type="radio" name="emp_sex" checked="" value="男" title="男">
			<input type="radio" name="emp_sex" value="女" title="女">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">生日</label>
		<div class="layui-input-inline">
			<input class="layui-input" lay-verify="required" id="birthday" autocomplete="off" name="birthday" type="text" placeholder="yyyy-MM-dd">
		</div>

		<label class="layui-form-label">专业</label>
		<div class="layui-input-inline">
			<input name="major" placeholder="专业" lay-verify="required" class="layui-input">
		</div>

		<label class="layui-form-label">入职日期</label>
		<div class="layui-input-inline">
			<input class="layui-input" lay-verify="required" id="hireday" autocomplete="off" name="hireday" type="text" placeholder="yyyy-MM-dd">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">邮箱地址</label>
		<div class="layui-input-inline">
			<input name="email" lay-verify="email" autocomplete="off" placeholder="邮箱地址" class="layui-input">
		</div>

		<label class="layui-form-label">支付宝</label>
		<div class="layui-input-inline">
			<input name="alipay" autocomplete="off" placeholder="支付宝" class="layui-input">
		</div>

		<label class="layui-form-label"><i class="layui-icon">&#xe677;</i> 微信</label>
		<div class="layui-input-inline">
			<input name="weixin" placeholder="微信号码" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label"><i class="layui-icon">&#xe705;</i>学历</label>
		<div class="layui-input-inline">
			<select name="education" lay-verify="required">
				<option value="">请选择学历</option>
				<option value="专科">专科</option>
				<option value="本科">本科</option>
				<option value="硕士">硕士</option>
				<option value="博士">博士</option>
			</select>
		</div>

		<label class="layui-form-label" >婚姻状况</label>
		<div class="layui-input-inline">
			<select name="married" lay-verify="required">
				<option value="">婚姻状况</option>
				<option value="已婚">已婚</option>
				<option value="未婚">未婚</option>
				<option value="丧偶">丧偶</option>
				<option value="离异">离异</option>
			</select>
		</div>

		<label class="layui-form-label"><i class="layui-icon">&#xe676;</i> QQ</label>
		<div class="layui-input-inline">
			<input name="qqcode" placeholder="QQ号码" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">毕业学校</label>
		<div class="layui-input-inline">
			<input name="university" placeholder="毕业学校" autocomplete="off" class="layui-input">
		</div>


		<label class="layui-form-label">身份证号</label>
		<div class="layui-input-inline">
			<input name="cardno" id="identity" autocomplete="off" lay-verify="identity" placeholder="身份证" class="layui-input">
		</div>

		<label class="layui-form-label"><i class="layui-icon">&#xe678;</i> 号码</label>
		<div class="layui-input-inline">
			<input name="phone" lay-verify="phone" autocomplete="off" placeholder="手机号码" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">部门职位</label>
		<div class="layui-input-inline">
			<select lay-filter="selectTheme" name="fdepid" id="board" lay-verify="required">
				<option value="">上级部门</option>
				<option th:each="e:${deps}"th:value="${e.depid}" th:text="${e.depname}">部门</option>
			</select>
		</div>

		<div class="layui-input-inline">
			<select lay-filter="theme" id="theme" name="zdepid">
				<option value="">下级部门</option>
			</select>
		</div>

		<div class="layui-input-inline">
			<select lay-filter="post" id="post" name="post_Id" lay-verify="required">
				<option value="">请选择职业</option>
				<option th:each="e:${posts}"th:value="${e.pos_Id}" th:text="${e.pos_Name}">部门</option>
			</select>
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-inline" id="area-picker">
			<label class="layui-form-label">家庭住址</label>
			<div name="city" class="layui-input-inline">
				<select id="province" name="province" class="province-selector" data-value="江西省" lay-filter="province-1">
					<option value="">请选择省</option>
				</select>
			</div>
			<div name="city" class="layui-input-inline">
				<select id="city" name="city" class="city-selector" data-value="赣州市" lay-filter="city-1">
					<option value="">请选择市</option>
				</select>
			</div>
			<div name="city" class="layui-input-inline">
				<select id="county" name="county" class="county-selector" data-value="章贡区" lay-filter="county-1">
					<option value="">请选择县区</option>
				</select>
			</div>
			<div name="city" class="layui-input-inline" style="width: 211px">
				<input id="detail" name="detail" lay-verify="required" autocomplete="off" placeholder="详细地址" class="layui-input">
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<center>
			<button id="bt" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-radius layui-btn-warm">重新填写</button>
		</center>
	</div>
</form>
</body>
<script th:src="@{/js/register/jquery-3.1.0.min.js}"></script>
<script type="text/javascript" th:inline="none">
	layui.use(['form','laydate'], function(){
        var form = layui.form;
        var laydate=layui.laydate;

		form.on('select(theme)', function (data) {
			$('#post').val("");
			form.render();
		})
		form.on('select(post)', function (data) {//对应lay-filter="selectTheme"
			var index1 = $('#post option:selected').val();//对应id="board"
			var fdep = $('#board').val();//一级
			var dep = $('#theme').val();//二级
			if (fdep != 0){
				$.ajax({
					url: "/emp/postedit",//对应controller层
					type: "post",
					data: {
						"id": index1,
						"fdep":fdep,
						"dep":dep
					},//将选中值的value传给controller
					datatype: "json",
					success: function (data) {
						if (data == 1){
							$('#post').val("");
							form.render();
							layer.msg('上级部门不能选择这个职位', { icon: 5, time: 2000 });
						}else if (data == 2){
							$('#post').val("");
							form.render();
							layer.msg('同一部门已有这个职位', { icon: 5, time: 2000 });
						}else if (data == 3){
							$('#post').val("");
							form.render();
							layer.msg('下级部门不能选择这个职位', { icon: 5, time: 2000 });
						}else if (data == 4){
							$('#post').val("");
							form.render();
							layer.msg('同一部门已有这个职位', { icon: 5, time: 2000 });
						}
					}
				})
			}
		});

		form.on('select(selectTheme)', function (data) {//对应lay-filter="selectTheme"
			var index1 = $('#board option:selected').val();//对应id="board"  得到一级菜单选中值的value
			var optionJson = [];
			$.ajax({
				url: "/emp/selectpost",//对应controller层
				type: "post",
				data: {"id": index1},//将选中值的value传给controller
				datatype: "json",
				success: function (data) {
					optionJson = data;
					var selectObj = document.getElementById("theme");//对应id="theme"
					selectObj.options.length = 0;
					selectObj.add(new Option("下级部门",""))
					for (var i = 0; i < data.length; i++) {
						selectObj.add(new Option(optionJson[i].depname, optionJson[i].depid));//对应数据库中名字，两个参数是(文本,value)
					}
					$('#post').val("");
					form.render();
				}
			})
		});

		//格式
		form.verify({
			// required: [/[\S]+/, "必填项不能为空"],
			phone: [/^1[3|4|5|7|8]\d{9}$/, "请输入正确的手机号"],
			email: [/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
			// url: [/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
			// number: function(e) {
			// 	if (!e || isNaN(e)) return "只能填写数字"
			// },
			// date: [/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
			identity: [/(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
		})

		//常规用法
        laydate.render({
            elem: '#entry'
        });

        //监听提交
        //你可以在这里做操作  也可以不使用这个方法
        form.on('submit(formDemo)', function(data){
			$.ajax({
				url: '/emp/add',
				type: 'post',
				data:data.field,
				dataType: 'json',
				success:function(data){
					if(data){
						//先得到当前iframe层的索引
						var index = parent.layer.getFrameIndex(window.name);
						//再执行关闭
						parent.layer.close(index);
						layer.msg(JSON.stringify("添加成功"));
						window.parent.location.reload();
					}else {
						$("#phone").val("");
						layer.msg('号码重复 添加失败', { icon: 5, time: 2000 });
					}
				},
			})
			return false;
		});

		laydate.render({
			elem: '#birthday'
			,calendar: true
		});

		laydate.render({
			elem: '#hireday'
			,calendar: true
		});

		//配置插件目录
		layui.config({
			base: '../layui/'
			, version: '1.0'
		});
		//一般直接写在一个js文件中
		layui.use(['layer', 'form', 'layarea'], function () {
			var layer = layui.layer
					, form = layui.form
					, layarea = layui.layarea;

			layarea.render({
				elem: '#area-picker',
				change: function (res) {
					//选择结果
					console.log(res);
				}
			});
		});
    });
</script>
</html>
